<!--
 * @Author: your name
 * @Date: 2020-10-15 08:34:36
 * @LastEditTime: 2021-06-15 10:35:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\index.vue
-->
<template>
  <div class="container">
    <Swiper :options="swiperOptions2" :dataArr="bannerArr" />
    <Policy />
    <Favorite />
    <!-- <ProductSwiper :productData="productData2" :title="swiperTitle1" :swiperOption="swiperOption3" _class="aa"/> -->
    <!-- <ProductSwiper :productData="productData2" :title="swiperTitle2" :swiperOption="swiperOption4" _class="bb" /> -->
    <ShopNow :ShopNowData="ShopNowData" class="shopNow"/>
    <LearnMore />
    <ShopNow :ShopNowData="ShopNowData2" class="take_learn" :isClass="isClass" :istxt="istxt"/>
    <OurStory />
  </div>
</template>

<script>
import Swiper from "~/components/common/Swiper";
import Policy from "~/components/home/Policy";
import Favorite from "~/components/home/Favorite";
import ProductSwiper from "~/components/home/ProductSwiper";
import ShopNow from "~/components/home/ShopNow";
import LearnMore from "~/components/home/LearnMore";
import OurStory from "~/components/home/OurStory";
// import {
//   getHomeBanner,
//   getHomeCatalog
// } from '@/api/content'
// import { mapMutations } from 'vuex';
export default {
  name: 'index',
  async asyncData ({ req, $axios, app }) {
    let bannerArr = [
      {
        banner_image: 'https://www.eyecedar.com/media/magiccart/magicslider/i/p/ipiro__8uxrj9x_x007_i_1.png'
      }
    ];
    // let productData = [];
    // let resArr = [
    //   getHomeBanner() // 获取首页banner图
    //   ,getHomeCatalog()
    // ]
    // let result = await Promise.all(resArr);
    // if(result[0].code === 200) {
    //   bannerArr = result[0].data
    //   console.log('bannerArr :>> ', bannerArr);
    // }
    // if(result[1].code === 200) {
    //   productData = result[1].data
    // }    
    let ShopNowData = [
      {
        img: require('../assets/image/home/img_1.png'),
        route: '/',
        name:'Shop now',
        txt: "Our pick"
      },
      {
        img: require('../assets/image/home/img_2.png'),
        route: '/',
        name:'Shop now',
        txt: "Share the best glasses in 2020"
      },
    ];
    let ShopNowData2 = [
      {
        img: require('../assets/image/home/img_4.png'),
        route: '/customer-sharing',
        name:'Take a look',
        txt: 'Customers share with us'
      },
      {
        img: require('../assets/image/home/img_5.png'),
        route: '/manufacturing',
        name:'Learn more',
        txt: 'Our manufacturing story'
      },
    ];
    let productData2 = [
      {
        id: 1,
        baseUrl: require('../assets/image/1_1_.jpg'),
        imgs: [
          { url: require('../assets/image/1_1_.jpg') },
          { url: require('../assets/image/1_1__1.jpeg') },
          { url: require('../assets/image/1_1__1_1.jpeg') },
        ],
        finalPrice: '89',
        name: 'FANKEN',
        price: '89',
        options: [
          {
            id: '1',
            img: require('../assets/image/8051-1.png'),
            title: 'blank'
          },
          {
            id: '2',
            img: require('../assets/image/8051-2.png'),
            title: 'gray'
          },
          {
            id: '3',
            img: require('../assets/image/8051-3.png'),
            title: 'white'
          },
        ]
      },
      {
        id: 2,
        imgs: [
          { url: require('../assets/image/1_1_.jpg') },
          { url: require('../assets/image/1_1__1.jpeg') },
          { url: require('../assets/image/1_1__1_1.jpeg') },
        ],
        finalPrice: '89',
        name: 'FANKEN',
        price: '89',
        options: [
          {
            id: '1',
            img: require('../assets/image/8051-1.png'),
            title: 'blank'
          },
          {
            id: '2',
            img: require('../assets/image/8051-2.png'),
            title: 'gray'
          },
          {
            id: '3',
            img: require('../assets/image/8051-3.png'),
            title: 'white'
          },
        ]
      },
      {
        id: 3,
        imgs: [
          { url: require('../assets/image/1_1_.jpg') },
          { url: require('../assets/image/1_1__1.jpeg') },
          { url: require('../assets/image/1_1__1_1.jpeg') },
        ],
        finalPrice: '89',
        name: 'FANKEN',
        price: '89',
        options: [
          {
            id: '1',
            img: require('../assets/image/8051-1.png'),
            title: 'blank'
          },
          {
            id: '2',
            img: require('../assets/image/8051-2.png'),
            title: 'gray'
          },
          {
            id: '3',
            img: require('../assets/image/8051-3.png'),
            title: 'white'
          },
        ]
      },
      {
        id: 4,
        imgs: [
          { url: require('../assets/image/1_1_.jpg') },
          { url: require('../assets/image/1_1__1.jpeg') },
          { url: require('../assets/image/1_1__1_1.jpeg') },
        ],
        finalPrice: '89',
        name: 'FANKEN',
        price: '89',
        options: [
          {
            id: '1',
            img: require('../assets/image/8051-1.png'),
            title: 'blank'
          },
          {
            id: '2',
            img: require('../assets/image/8051-2.png'),
            title: 'gray'
          },
          {
            id: '3',
            img: require('../assets/image/8051-3.png'),
            title: 'white'
          },
        ]
      }
    ];
    let swiperTitle1 = 'New Arrivals';
    let swiperTitle2 = 'Best Sellers';
    return {
      ShopNowData: ShopNowData,
      ShopNowData2: ShopNowData2,
      bannerArr: bannerArr,
      // productData: productData,
      productData2: productData2,
      swiperTitle2: swiperTitle2,
      swiperTitle1: swiperTitle1
    }
  },
  data() {
    var _this = this;
    return {
      swiperOptions2: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        paginationClickable: true,
        loop: true,
        observer: true,
        observerParent: true,
        observeSlideChildren: true,
        navigation: {
          nextEl: "",
          prevEl: "",
        },
      }
      ,swiperOption3: {
        slidesPerView: 4,
        spaceBetween: 0,
        slidesPerGroup: 4,
        preventClicks : false,//默认true
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next.aa",
          prevEl: ".swiper-button-prev.aa",
        },
        observer: true,
        observeParents: true,
        on: {
          click: function (swiper) {
            // 需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 _this，来调用 methods 里的方法
            let localName = parseInt(swiper.path[0].dataset['index']);
            if (localName) {
              // 点击颜色切换图片轮播
              _this.switchTap(swiper);
            } else {
              // 点击添加喜欢
              _this.addFavorite(swiper);
            }
          },
        },
      },
      swiperOption4: {
        slidesPerView: 4,
        spaceBetween: 0,
        slidesPerGroup: 4,
        preventClicks : false,//默认true
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next.bb",
          prevEl: ".swiper-button-prev.bb",
        },
        observer: true,
        observeParents: true,
        on: {
          click: function (swiper) {
            // 需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 _this，来调用 methods 里的方法
            let localName = parseInt(swiper.path[0].dataset['index']);
            if (localName) {
              // 点击颜色切换图片轮播
              _this.switchTap(swiper);
            } else {
              // 点击添加喜欢
              _this.addFavorite(swiper);
            }
          },
        },
      },
      isClass: {
        'left': '30px',
        'width': '220px',
        'bottom': '30%',
        'color': '#fff',
        'borderRadius': '5px',
        'border': '1px solid #fff',
        'display': 'block',
        'paddingTop': '15px',
        'paddingBottom': '15px',
        'textAlign':'center'
      },
      istxt: {
        'bottom': '50%',
        'fontSize': '24px',
        'width': 'unset',
        'color': '#fff'
      },
    };
  },
  methods: {
    // ...mapMutations('content', ['SET_FAVOURITESNUM']),
    switchTap(swiper) {
      let index = parseInt(swiper.path[0].dataset['index'] - 1);
      let isEle = swiper.path[4].dataset['box'];
      if (index !== 0 && !index) return
      if (isEle) {
        let parentEle = swiper.path[4];
        const liImg = parentEle.querySelectorAll('.liImg');
        const liRadio = parentEle.querySelectorAll('.liRadio');
        for(let i = 0; i < liImg.length; i++){
          liImg[i].classList.remove("productActive");
          liRadio[i].classList.remove("optionAcitve");
        }
        liImg[index].classList.add("productActive");
        liRadio[index].classList.add("optionAcitve");
      }
    },
    addFavorite(swiper) {
      let isEle = swiper.path[4].dataset['box'];
      if (isEle) {
        let item = swiper.path[4].dataset['item'];
        
        // getCaptcha({sid: sid}).then(res => {
        //   let msg = 'Add to wishlist accessfully!'
        //   let num = this.$store.state.content.favouritesNum;
        //   this.$store.commit('content/SET_FAVOURITESNUM', parseInt(num+1));
        //   Message.success({
        //     message: msg
        //   })
        // })
      }
    }
  },
  components: {
    Swiper,
    Policy,
    Favorite,
    ProductSwiper,
    ShopNow,
    LearnMore,
    OurStory,
  },
  head() {
    return {
      title: '八仔电子商务公司|外贸进出口|网站建设|电商',
      meta: [
        { hid: 'keywords', name: 'keywords', content: '八仔，外贸，电子商务，电商，网站建设' },
        { hid: 'description', name: 'description', content: '八仔电子商务公司' }
      ]
    }
  }
};
</script>

<style>
.shopNow .ShopNow_box:first-child .our_pick_txt {
  top: 55px;
  bottom: unset;
  font-size: 24px;
  width: unset;
}
.take_learn .ShopNow_link:hover {
  border-color: rgba(255,255,255,.8);
  color: rgba(255,255,255,.8)!important;
}
</style>
